<template>
  <div>
    <Form :label-width="100">
      <FormItem label="名称">
        <Tooltip content="系列名称，用于tooltip的显示" :max-width="200" placement="top">
          <Input size="small" v-model="obj.name" placeholder=""/>
        </Tooltip>
      </FormItem>
      <FormItem label="数据源对应值">
        <Input size="small" v-model="obj.datasourceKey" placeholder="datasourceKey"/>
      </FormItem>
      <FormItem label="层级">
        <InputNumber size="small" :max="100" :min="0" v-model="obj.zlevel"></InputNumber>
      </FormItem>

      <Collapse>
        <Panel name="1">
          飞线样式配置
          <div slot="content">
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="obj.lineStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="线宽">
              <InputNumber size="small" :max="100" :min="0" v-model="obj.lineStyle.width"></InputNumber>
            </FormItem>
            <FormItem label="类型">
              <Select :transfer="true" size="small" v-model="obj.lineStyle.type">
                <Option value="solid">实线</Option>
                <Option value="dashed">虚线</Option>
                <Option value="dotted">点线</Option>
              </Select>
            </FormItem>
            <FormItem label="阴影大小">
              <InputNumber size="small" :max="100" :min="0" v-model="obj.lineStyle.shadowBlur"></InputNumber>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="obj.lineStyle.shadowColor" alpha recommend/>
            </FormItem>
            <FormItem label="透明度">
              <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="obj.lineStyle.opacity"></InputNumber>
            </FormItem>
            <FormItem label="边的曲度">
              <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="obj.lineStyle.curveness"></InputNumber>
            </FormItem>
          </div>
        </Panel>
        <Panel name="2">
          飞线特效配置
          <div slot="content">
            <FormItem label="显示特效">
              <i-switch v-model="obj.effect.show">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="特效动画时间">
              <InputNumber size="small" :max="100" :min="0" v-model="obj.effect.period"></InputNumber> 秒
            </FormItem>
            <FormItem label="特效动画延时">
              <InputNumber size="small" :max="100" :min="0" v-model="obj.effect.delay"></InputNumber> 毫秒
            </FormItem>
            <FormItem label="固定速度">
              <Tooltip content="设置固定速度之后，不论飞线的长度如何，特效都会以同样的速度运行；设置为大于0的值后会忽略特效动画时间配置项"
                       max-width="200" placement="top">
                <InputNumber size="small" :max="1000" :min="0" v-model="obj.effect.constantSpeed"></InputNumber> 像素/秒
              </Tooltip>
            </FormItem>
            <FormItem label="图形标记">
              <Tooltip content="切换图形标记之后，请保存当前页面之后并刷新设计器方可查看效果" max-width="200" placement="top">
                <Select :transfer="true" size="small" v-model="obj.effect.symbol">
                  <Option v-for="item in $PnChartDict.symbols" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </Tooltip>
            </FormItem>
            <FormItem label="图形标记大小">
              <InputNumber size="small" :max="100" :min="0" v-model="obj.effect.symbolSize"></InputNumber>
            </FormItem>
            <FormItem label="颜色">
              <PnColorPicker size="small" v-model="obj.effect.color" alpha recommend/>
            </FormItem>
            <FormItem label="特效尾迹长度">
              <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="obj.effect.trailLength"></InputNumber>
            </FormItem>
            <FormItem label="是否循环播放">
              <i-switch v-model="obj.effect.loop">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
          </div>
        </Panel>
        <Panel name="100">
          静态数据
          <div slot="content">
            <CodeEditor v-model="staticData" mode="json" @on-submit-change="updateData"></CodeEditor>
          </div>
        </Panel>
      </Collapse>

    </Form>
  </div>
</template>

<script>
  export default {
    name: "CPMSeriesLinesSettingForm",
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value,
        staticData: null,
      }
    },
    mounted() {
      this.staticData = JSON.stringify(this.obj.data, null, 2);
    },
    methods: {
      updateData () {
        this.obj.data = JSON.parse(this.staticData)
      },
    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style scoped>

</style>
